import React, { useEffect } from "react";
import ChatHelper from "../../helper/chat/Chathelper";
import { Button, Container, Tab, Tabs } from "react-bootstrap";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import ChatContact,{EditContact} from "./contact";
import ChatNotification from './notification'
import ChatConversation from './conversation';
import ChatChannel from "./channel";
import ChatDialog from './chatdialog';
import ChatBot from './bot';
import ChatGroup,{AddOrEditChatGroup} from "./group";
import { PopupDialog } from "../../components/common";

const ChatHome:React.FC = (props)=> {
    
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(()=>{
        console.debug("chat")
        ChatHelper.setupSocket({onConnected:()=>{
            console.debug("connected");
        },onError:(err:any)=>{
            PopupDialog.showBsError(err);
        }});
    },[])

    const onSelect = (k:string|null)=>{
        if(k){
            navigate(k);
        }
    }

    return (<Container fluid id="chatroot" className="d-flex flex-1 flex-column p-0 m-0">
        <Tabs className="border-0 flex-row" style={{width:"100%"}} onSelect={onSelect} defaultActiveKey={location.pathname}>
            <Tab eventKey={"/chat/conversations"} title={"Conversations"}/>
            <Tab eventKey={"/chat/contact"} title={"Contacts"}/>
            <Tab eventKey={"/chat/group"} title={"Chat Group"}/>
            <Tab eventKey={"/chat/channel"} title={"Channel"}/>
            <Tab eventKey={"/chat/bot"} title={"Bot"}/>
            <Tab eventKey={"/chat/notification"} title={"Notification"}/>
        </Tabs>
        <Container fluid className="d-flex flex-column m-0 p-0" style={{flex:1}}>
            <Outlet/>
        </Container>
    </Container>)
}

export default ChatHome;

export {
    ChatContact,
    EditContact,
    ChatGroup,
    ChatChannel,
    ChatConversation,
    ChatNotification,
    ChatBot,
    ChatDialog,
    AddOrEditChatGroup,
}

